<template>
  <div id='tmpl'>
      <div class="slider">
          <slider :imgs='list'></slider>    
      </div>
      <div id="neirong" v-for="item in info">
          <div class="buy" >
          <h4 v-text="item.title"></h4>
          <hr>
          <ul>
              <li class="price">
                  市场价:<s>￥{{item.market_price}}</s>    销售价: <span>￥{{item.sell_price}}</span>
              </li>
              <li class="inputul"> 
                  购买数量:<inputNumber @dataobj="getcount" class="inputN"></inputNumber>
                  <transition name="show" 
                  @before-enter="beforeEnter" @enter = "enter" @after-enter="afterEnter"
                  >
                  <div v-show="isShow" class="ball"></div>
                  </transition>
              </li>
              <li>
                  <mt-button type="primary" size="small">立即购买</mt-button>
                  <mt-button @click="toshopcount" type="danger" size="small">加入购物车</mt-button>
              </li>
          </ul>
      </div>
      <div class="params">
          <h6>商品参数</h6>
          <hr>
          <ul>
              <li>商品货号:{{item.goods_no}}</li>
              <li>库存情况:{{item.stock_quantity}}</li>
              <li>上架时间:{{item.add_time | datefmt('YYYY-MM-DD')}}</li>
          </ul>
      </div>
      <div class="other">
           <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
                <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
           </router-link>
            <router-link v-bind="{to:'/goods/goodscomment/'+id}">
                <mt-button    type="danger" size="large">商品评论</mt-button>
            </router-link>
      </div>
      </div>
  </div>
</template>
<script>
import slider from '../subcom/slider.vue';
import common from '../kits/common.js'
import inputNumber from './inputNumber.vue';
import { Toast } from 'mint-ui';
import {vm,COUNTS} from '../kits/vm.js';
import {setItem,valueobj} from '../kits/localSg.js';
export default {
   components:{
       slider,
       inputNumber
      },
  data() {
    return {
        isShow:false,
        id:0,
        list:[],
        info:[],
        inputNumberCount:1
    }
  },
  created(){
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
  },
  methods:{
      //定义动画
      beforeEnter(el){
          //设定小球的初始位置
          el.style.transform = "translate(0px,0px)";
      },
      enter(el,done){
          //保证小球出现位置
          el.offsetWidth;
          el.style.transform = 'translate(100px,400px)';
          done();
      },
      afterEnter(el){
          //重置小球的初始状态
          this.isShow = !this.isShow;
      },
      getimgs(){
          this.$http.get(common.apidomain+'/api/getthumimages/'+this.id).then(function(res){
              if(res.body.status !=0){
                  Toast('res.body.message');
                  return;
              }
              this.list = res.body.message;
              
            })
      },
      getcount(count){
         this.inputNumberCount = count;
      },
      getinfo(){
           this.$http.get(common.apidomain+'/api/goods/getinfo/'+this.id).then(function(res){
              if(res.body.status !=0){
                  Toast('res.body.message');
                  return;
              }
              this.info = res.body.message;
              
            })
      },
      toshopcount(){
          vm.$emit(COUNTS,this.inputNumberCount);
          //将数据保存到local
          valueobj.goodsid = this.id;
          valueobj.count = this.inputNumberCount;
          setItem(valueobj);
          this.isShow = !this.isShow;

      }
  }
          
}
</script>
<style lang="css" scoped>
.slider{
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
}
.buy,.params{
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}
.buy li,.params li{
    list-style: none;
    padding: 8px;
}
.buy ul{
    padding-left: 0px;
}
.buy h4{
    color: #0094ff;
    padding: 5px;
}
.buy .price span{
    color: red;

}
.imgdesc{
    margin-bottom: 20px;
}
.inputul{
    position: relative;
}
.inputN{
    position: absolute;
    top: 8px;
    left: 85px;
}
.ball{
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    left:40%;
    top:27%;
    transition: all 0.5s ease;
    z-index: 100;
}
</style>